import { defineComponent } from 'vue';
import Autogrow from './Autogrow.vue';
import Borderless from './Borderless.vue';
import Clearable from './Clearable.vue';
import Coloring from './Coloring.vue';
import CustomLabel from './CustomLabel.vue';
import Dark from './Dark.vue';
import Debouncing from './Debouncing.vue';
import Demo from './Demo.vue';
import DesignFilled from './DesignFilled.vue';
import DesignOutlined from './DesignOutlined.vue';
import DesignOverview from './DesignOverview.vue';
import DesignStandard from './DesignStandard.vue';
import DesignStandout from './DesignStandout.vue';
import InputTypeFile from './InputTypeFile.vue';
import InputTypeNumber from './InputTypeNumber.vue';
import InputTypes from './InputTypes.vue';
import LoadingState from './LoadingState.vue';
import MaskBasic from './MaskBasic.vue';
import MaskFill from './MaskFill.vue';
import MaskFillReverse from './MaskFillReverse.vue';
import MaskUnmaskedModel from './MaskUnmaskedModel.vue';
import NativeForm from './NativeForm.vue';
import PrefixSuffix from './PrefixSuffix.vue';
import Rounded from './Rounded.vue';
import ShadowText from './ShadowText.vue';
import SquareBorders from './SquareBorders.vue';
import StandoutToolbar from './StandoutToolbar.vue';
import Textarea from './Textarea.vue';
import ValidationAsync from './ValidationAsync.vue';
import ValidationExternal from './ValidationExternal.vue';
import ValidationForm from './ValidationForm.vue';
import ValidationLazy from './ValidationLazy.vue';
import ValidationMaxLength from './ValidationMaxLength.vue';
import ValidationRequired from './ValidationRequired.vue';
import ValidationSlots from './ValidationSlots.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Demo</h5>
            <Demo />
          </div>
          <div class='block-'>
            <h5 class='title'>Autogrow</h5>
            <Autogrow />
          </div>
          <div class='block-'>
            <h5 class='title'>Borderless</h5>
            <Borderless />
          </div>
          <div class='block-'>
            <h5 class='title'>Clearable</h5>
            <Clearable />
          </div>
          <div class='block-'>
            <h5 class='title'>Coloring</h5>
            <Coloring />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomLabel</h5>
            <CustomLabel />
          </div>
          <div class='block-'>
            <h5 class='title'>Dark</h5>
            <Dark />
          </div>
          <div class='block-'>
            <h5 class='title'>Debouncing</h5>
            <Debouncing />
          </div>
          <div class='block-'>
            <h5 class='title'>DesignFilled</h5>
            <DesignFilled />
          </div>
          <div class='block-'>
            <h5 class='title'>DesignOutlined</h5>
            <DesignOutlined />
          </div>
          <div class='block-'>
            <h5 class='title'>DesignOverview</h5>
            <DesignOverview />
          </div>
          <div class='block-'>
            <h5 class='title'>DesignStandard</h5>
            <DesignStandard />
          </div>
          <div class='block-'>
            <h5 class='title'>DesignStandout</h5>
            <DesignStandout />
          </div>
          <div class='block-'>
            <h5 class='title'>InputTypeFile</h5>
            <InputTypeFile />
          </div>
          <div class='block-'>
            <h5 class='title'>InputTypeNumber</h5>
            <InputTypeNumber />
          </div>
          <div class='block-'>
            <h5 class='title'>InputTypes</h5>
            <InputTypes />
          </div>
          <div class='block-'>
            <h5 class='title'>LoadingState</h5>
            <LoadingState />
          </div>
          <div class='block-'>
            <h5 class='title'>MaskBasic</h5>
            <MaskBasic />
          </div>
          <div class='block-'>
            <h5 class='title'>MaskFill</h5>
            <MaskFill />
          </div>
          <div class='block-'>
            <h5 class='title'>MaskFillReverse</h5>
            <MaskFillReverse />
          </div>
          <div class='block-'>
            <h5 class='title'>MaskUnmaskedModel</h5>
            <MaskUnmaskedModel />
          </div>
          <div class='block-'>
            <h5 class='title'>NativeForm</h5>
            <NativeForm />
          </div>
          <div class='block-'>
            <h5 class='title'>PrefixSuffix</h5>
            <PrefixSuffix />
          </div>
          <div class='block-'>
            <h5 class='title'>Rounded</h5>
            <Rounded />
          </div>
          <div class='block-'>
            <h5 class='title'>ShadowText</h5>
            <ShadowText />
          </div>
          <div class='block-'>
            <h5 class='title'>SquareBorders</h5>
            <SquareBorders />
          </div>
          <div class='block-'>
            <h5 class='title'>StandoutToolbar</h5>
            <StandoutToolbar />
          </div>
          <div class='block-'>
            <h5 class='title'>Textarea</h5>
            <Textarea />
          </div>
          <div class='block-'>
            <h5 class='title'>ValidationAsync</h5>
            <ValidationAsync />
          </div>
          <div class='block-'>
            <h5 class='title'>ValidationExternal</h5>
            <ValidationExternal />
          </div>
          <div class='block-'>
            <h5 class='title'>ValidationForm</h5>
            <ValidationForm />
          </div>
          <div class='block-'>
            <h5 class='title'>ValidationLazy</h5>
            <ValidationLazy />
          </div>
          <div class='block-'>
            <h5 class='title'>ValidationMaxLength</h5>
            <ValidationMaxLength />
          </div>
          <div class='block-'>
            <h5 class='title'>ValidationRequired</h5>
            <ValidationRequired />
          </div>
          <div class='block-'>
            <h5 class='title'>ValidationSlots</h5>
            <ValidationSlots />
          </div>
        </div>
      );
    };
  },
});
